<template>
    <div class="ms-login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item prop="name" label="权限名称">
                <el-input v-model="ruleForm.name" placeholder="输入权限名称"></el-input>
            </el-form-item>
            <!--<el-form-item prop="is_menu">-->
            <!--<el-radio v-model="ruleForm.is_menu" label="0">菜单</el-radio>-->
            <!--<el-radio v-model="ruleForm.is_menu" label="1">按钮</el-radio>-->
            <!--</el-form-item>-->
            <!--<template v-if="ruleForm.is_menu==='0'">-->
            <!--<el-form-item prop="url">-->
            <!--<el-input v-model="ruleForm.url" placeholder="跳转地址"></el-input>-->
            <!--</el-form-item>-->
            <!--</template>-->
            <!--<el-form-item prop="icon">-->
            <!--<el-input type="text" placeholder="图标" v-model="ruleForm.icon"-->
            <!--@keyup.enter.native="submitForm('ruleForm')"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item prop="sort">-->
            <!--<el-input v-model="ruleForm.sort" placeholder="排序数"></el-input>-->
            <!--</el-form-item>-->
            <div class="login-btn" style="margin-left: 80px;">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button type="default" @click="cancel">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    id: '',
                    pid: '',
                    name: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入权限名称', trigger: 'blur'}
                    ],
                    url: [
                        {required: true, message: '请输入跳转路由', trigger: 'blur'}
                    ],
                    sort: [
                        {required: true, message: '请输入排序数', trigger: 'blur'}
                    ],
                }
            }
        },
        props: ["uid", 'par'],
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 这个方法被父级组件调用
            treeClick(){
                // console.log(this.uid, this.par)
                // if(this.par!=='2') {
                //     this.ruleForm.name = '';
                //     return;
                // }
                this.loadopen();
                this.config.get('/admin/role/findById', {id: this.uid}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        if(this.par==='0') {
                            this.ruleForm.id = '';
                            this.ruleForm.pid = res.data.role.pid;
                            this.ruleForm.name = '';
                        }
                        if(this.par==='1') {
                            this.ruleForm.id = '';
                            this.ruleForm.pid = res.data.role.id;
                            this.ruleForm.name = '';
                        }
                        if(this.par==='2') {
                            this.ruleForm.id = res.data.role.id;
                            this.ruleForm.pid = res.data.role.pid;
                            this.ruleForm.name = res.data.role.name;
                        }
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            },
            submitForm(formName) {
                const self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addTree();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 添加菜单
            addTree(){
                let obj = {
                    'role.id': this.ruleForm.id,
                    'role.pid': this.ruleForm.pid,
                    'role.name': this.ruleForm.name,
                };
                let url = this.par === '2' ? '/admin/role/update':'/admin/role/add';
                this.config.post2(url, obj).then(res=>{
                    if(res.data.code==='0'){
                        this.$emit('chang', res.data.message);
                    }else{
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            // 取消
            cancel(){
                this.$emit('chang', '取消');
            },
        },
        mounted(){
        }
    }
</script>

<style scoped>
    .ms-login{
        margin: 0 auto;
    }
</style>
